<template>
  <view :class="['home', themeClass]">
    <view class="search">
      <view class="set" @click="returnToTheSuperior">
        <image :src="back" />
      </view>
      <view class="title">
        <text>{{ order == 'new' ? '最新记录' : '历史记录' }}</text>
      </view>
      <view class="icon" @click="changeOrder">
        <image v-if="order == 'new'" :src="newImg" />
        <image v-else :src="nextImg" />
      </view>
    </view>
    <view class="body">
      <ImgList @scrolltolower="scrolltolowerEvent" @deleteImg="deleteImg" @refreshEvent='refreshEvent'
        :imgList="imgList" class="imgList" :type="2">
      </ImgList>
      <Loading v-show='loading' class="loadMore"></Loading>
    </view>
    <image :src="Clear" class="clear" @click="clearAll" />
  </view>
</template>
<script setup lang="ts">
import { useTheme } from '@/hooks/useTheme'
const { themeClass } = useTheme()
import { onLoad } from '@dcloudio/uni-app'
import back from '@/static/images/back.png'
import nextImg from '@/static/images/next.png'
import newImg from '@/static/images/new.png'
import Clear from '@/static/images/del.png'
import { useImgInfoStore } from '@/stores/index'
const imgInfoStore = useImgInfoStore()
import { ref } from 'vue'
type ImgList = {
  small: string
  src: string
  tag: string
}
const historyImgList = ref<any>([])
const imgList = ref<ImgList[]>([])
const page = ref(0)
const limit = ref(10)

const order: any = ref('next')
const loading = ref(false)
const changeOrder = () => {
  historyImgList.value = historyImgList.value.reverse()
  if (order.value == 'new') {
    order.value = 'next'
  } else {
    order.value = 'new'
  }
  page.value = 0
  imgList.value = []
  setTimeout(() => {
    getData()
  }, 100)
}
const refreshEvent = () => {
  page.value = 0
  imgList.value = []
  getData()
}
const getData = async () => {
  loading.value = true
  imgList.value = imgList.value.concat(historyImgList.value.slice(page.value * limit.value, (page.value + 1) * limit.value))
  loading.value = false
}
const scrolltolowerEvent = () => {
  if (loading.value || imgList.value.length >= historyImgList.value.length) return
  page.value++
  getData()
}

const returnToTheSuperior = () => {
  uni.navigateBack()
}
const deleteImg = (src: string) => {
  imgInfoStore.historyImgList = imgInfoStore.historyImgList.filter((item: any) => item.src != src)
  historyImgList.value = historyImgList.value.filter((item: any) => item.src != src)
  imgList.value = imgList.value.filter((item: any) => item.src != src)
}
const clearAll = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空历史记录吗？',
    success: function (res) {
      if (res.confirm) {
        imgInfoStore.clearHistory()
        historyImgList.value = []
        imgList.value = []
      }
    }
  })
}
onLoad(() => {
  historyImgList.value = JSON.parse(JSON.stringify(imgInfoStore.historyImgList))
  getData()
})
</script>
<style scoped lang="scss">
.home {
  padding-top: var(--status-bar-height);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .search {
    padding: 10rpx;
    display: grid;
    gap: 5px;
    grid-template-columns: 60rpx 1fr 60rpx;

    .set,
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 60rpx;
        width: 60rpx;
      }
    }

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20rpx;
      font-weight: bold;
    }
  }

  .body {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .imgList {
      flex: 1;
    }

    .loadMore {
      left: 50%;
      transform: translateX(-50%);
      bottom: 20rpx;
      position: absolute;
    }
  }

  .clear {
    width: 30px;
    height: 30px;
    position: fixed;
    bottom: 30px;
    right: 15px;
    z-index: 999;
  }
}
</style>
